<template>
  <div class="dayHot">
    <h2 class="title">今日热点</h2>
    <ul class="hotPoints">
      <template v-for="(item,index) in dayHotPoints">
        <li class="hotPointsItem" :key="item.id" v-if="index<2" @click="movieNews(item.id)">
          <div class="img">
            <img :src="item.img" alt />
          </div>
          <div class="desc">
            <p class="movieTitle">{{item.title}}</p>
            <p class="movieDetail">{{item.desc}}</p>
            <p class="time">{{item.publishTime}}</p>
          </div>
        </li>
      </template>
    </ul>
    <div class="news">
      <h3>{{dayHotPoints[2].title}}</h3>
      <p>{{dayHotPoints[2].desc}}</p>
      <ul class="imgBox">
        <li v-for="item in dayHotPoints[2].images" :key="item.id" @click="movieNews(dayHotPoints[2].id)">
          <img :src="item.url1" alt />
        </li>
      </ul>
      <span class="time">{{dayHotPoints[2].publishTime}}</span>
    </div>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
export default {
  name: "dayHot",
  components: {},
  props: {
    hotPoints: Array
  },
  data() {
    return {};
  },
  watch: {},
  computed: {
    dayHotPoints() {
      this.hotPoints.forEach((val, index) => {
        val.publishTime = util.transformDate(val.publishTime * 1000);
      });
      // console.log(this.hotPoints)
      return this.hotPoints;
    }
  },
  methods: {
    movieNews(id){
      this.$router.push({
      name:"movieNesw",
      params:{
        id
      }
      })
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.dayHot {
  margin-top: vw(10);
  padding: 0 vw(16);
  .title {
    font-size: vw(22);
  }
  .hotPoints {
    margin-top: vw(10);
    .hotPointsItem {
      display: flex;
      justify-content: space-between;
      padding-bottom: vw(20);
      border-bottom: vw(1) solid #999;
      margin-bottom: vw(20);
      .img {
        width: vw(131);
        height: vw(91);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .desc {
        width: vw(196);
        display: flex;
        flex-direction: column;
        .movieTitle {
          font-size: vw(16);
          font-weight: bold;
        }
        .movieDetail {
          font-size: vw(14);
          color: #777;
        }
      }
    }
  }
  .news {
    h3 {
      font-size: vw(20);
    }
    p {
      font-size: vw(14);
      color: #999;
      padding: vw(5) 0;
    }
    .imgBox {
      display: flex;
      justify-content: space-between;
      li {
        width: vw(109);
        height: vw(74);
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
  }
}
.time {
  font-size: vw(12);
  color: #777;
}
</style>